<template>
  <!--机构与用户管理-->
  <section class="page user-manage">
    <div class="row">
      <div class="col-span-2 org-tree">
        <div class="add-org">
          <el-button @click="onAdd" v-auth = "20">添加机构</el-button>
        </div>
        <data-tree @edit="onEdit" @add="onAdd" @delete="onDelete" @select-change="onChange" :props="{title:'deptName'}" showEdit ref="orgTree" :data="departmentData"></data-tree>
      </div>
      <div class="col-span-10">
        <data-form :model="userModel" @onSearch="refreshData" :page="pageService">
          <template slot="inputs">
            <el-form-item label="姓名" prop="realName">
              <el-input v-model="userModel.realName"></el-input>
            </el-form-item>
            <el-form-item label="用户名" prop="userName">
              <el-input v-model="userModel.userName"></el-input>
            </el-form-item>
            <el-form-item label="状态" prop="userStatus">
              <el-select v-model="userModel.userStatus" size="small" clearable="">
                <el-option v-for="{index,name,code} in $dict.getDictData('CommonState')" :key="index" :label="name" :value="code">
                </el-option>
              </el-select>
            </el-form-item>
          </template>
        </data-form>
        <data-box :data="userDataSet" :selectionList.sync="selectionList" @onPageChange="refreshData" :page="pageService" ref="data-box">
          <template slot="buttons">
            <el-button @click="dialog.addUser = true" v-auth = "21">新增用户</el-button>
            <el-button @click="batchRoleClick" v-auth = "22">批量分配角色</el-button>
            <el-button @click="batchOpenClick" v-auth = "23">开启分案</el-button>
            <el-button @click="batchCloseClick" v-auth = "24">关闭分案</el-button>
            <el-button @click="batchLevelClick" v-auth = "25">催收员等级</el-button>
          </template>
          <template slot="columns">
            <el-table-column label="操作" :min-width="$helper.getOperateWidth(4)">
              <template slot-scope="scope">
                <el-button type="text" @click="dialog.modify=true,userObj=scope.row">修改用户</el-button>
                <el-button type="text" @click="dialog.roleAllot=true,userObj=scope.row">分配角色</el-button>
                <el-button type="text" size="small" @click="resetClick(scope)">重置密码</el-button>
                <el-button type="text" size="small" @click="dialog.facility=true,userObj=scope.row">设备管理</el-button>
              </template>
            </el-table-column>
            <el-table-column prop="realName" label="姓名" :min-width="$helper.getColumnWidth(4)" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="userName" label="用户名" :min-width="$helper.getColumnWidth(4)" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="userLevel" label="催收员等级" :min-width="$helper.getColumnWidth(4)" :formatter="(row) => $filter.dictConvert(row.userLevel,'UserLevel')" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="deptName" label="机构" :min-width="$helper.getColumnWidth(4)" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="deptType" label="催收类型" :formatter="(row) => $filter.dictConvert(row.deptType,'DepartmentType')" :min-width="$helper.getColumnWidth(4)">
            </el-table-column>
            <el-table-column prop="userStatus" label="状态" :formatter="(row) => $filter.dictConvert(row.userStatus,'CommonState')" :min-width="$helper.getColumnWidth(2)">
            </el-table-column>
            <el-table-column prop="caseSwitch" label="分案开关" :formatter="(row) => $filter.dictConvert(row.caseSwitch,'CommonState')" :min-width="$helper.getColumnWidth(4)" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="phone" label="电话" :formatter="(row)=>$filter.encryptPhone(row.phone)" :min-width="$helper.getColumnWidth(4)" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="userEmail" label="邮箱" :min-width="$helper.getColumnWidth(4)" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="effectiveTime" label="生效时间" :min-width="$helper.getColumnWidth(6)" :formatter="(row) => $filter.dateTimeFormat(row.effectiveTime)"  show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="deadTime" label="失效时间" :min-width="$helper.getColumnWidth(6)" :formatter="(row) => $filter.dateTimeFormat(row.deadTime)"  show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="operatorRealName" label="创建人" :min-width="$helper.getColumnWidth(4)" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间" :min-width="$helper.getColumnWidth(6)" :formatter="(row) => $filter.dateTimeFormat(row.createTime)"  show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="seatNumber" label="坐席工号" :min-width="$helper.getColumnWidth(4)" show-overflow-tooltip>
            </el-table-column>
          </template>
        </data-box>
      </div>
    </div>
    <!--批量分配角色-->
    <el-dialog title="批量分配角色" :center="true" :visible.sync="dialog.batchRole" width="600px" @open="$nextTick(()=>$refs['batch-allot-role'].refresh())" :close-on-click-modal="false" :close-on-press-escape="false">
      <batch-allot-role :companyCode="companyCode" :userList="selectionList" ref="batch-allot-role" @refreshList="refreshData" @close="dialog.batchRole = false"></batch-allot-role>
    </el-dialog>
    <!--分配角色-->
    <el-dialog title="分配角色" :center="true" :visible.sync="dialog.roleAllot" width="600px" @open="$nextTick(()=>$refs['allot-role'].refreshData())" :close-on-click-modal="false" :close-on-press-escape="false">
      <allot-role ref="allot-role" :companyCode="companyCode" :user="userObj" @refreshList="refreshData" @close="dialog.roleAllot = false"></allot-role>
    </el-dialog>
    <!--设备管理-->
    <el-dialog title="设备管理" :center="true" :visible.sync="dialog.facility" width="60%" @open="$nextTick(()=>$refs['facility-manage'].refresh(userObj))" :close-on-click-modal="false" :close-on-press-escape="false">
      <facility-manage ref="facility-manage"></facility-manage>
    </el-dialog>
    <!-- 批量设备管理 -->
    <el-dialog title="批量设备管理" :center="true" :visible.sync="dialog.batchFacility" width="700px" @open="$nextTick(()=>$refs['batch-facility'].refresh(selectionList))">
      <batch-facility ref="batch-facility" @refreshList="refreshData"></batch-facility>
    </el-dialog>
    <!--批量设置催收员等级-->
    <el-dialog title="批量设置催收员等级" :center="true" :visible.sync="dialog.batchLevel" width="20%" @open="$nextTick(()=>$refs['batch-collector-level'].refresh())" :close-on-click-modal="false" :close-on-press-escape="false">
      <batch-collector-level :userList="selectionList" @refreshList="refreshData" ref="batch-collector-level" @close="dialog.batchLevel = false"></batch-collector-level>
    </el-dialog>
    <!--修改用户-->
    <el-dialog title="修改用户" :center="true" :visible.sync="dialog.modify" width="50%" @open="$nextTick(()=>$refs['modify-user'].refresh(userObj))" :close-on-click-modal="false" :close-on-press-escape="false">
      <modify-user ref="modify-user" @refreshList="refreshData" @close="dialog.modify = false" :user="userObj" :deptId="deptId" @refresh="refreshData"></modify-user>
    </el-dialog>
    <!--新增用户-->
    <el-dialog title="新增用户" @open="getdeptId" @close="dialog.addUser = false" :visible.sync="dialog.addUser" :close-on-click-modal="false" :show-close="false" :close-on-press-escape="false">
      <add-user @close="dialog.addUser=false" @refresh="refreshData" ref="dept" :deptId="deptId" :password="userObj.password"></add-user>
    </el-dialog>
    <!--添加机构-->
    <el-dialog title="添加机构" @open="dialogOpen" @close="dialog.addOrganizeFlag = false" :visible.sync="dialog.addOrganizeFlag" width="450px" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false">
      <add-organize @close="dialog.addOrganizeFlag=false" @refresh="getDepartmentList()" :deptId="deptId" ref="add-dept"></add-organize>
    </el-dialog>
    <!--修改机构-->
    <el-dialog title="修改机构" @open="getOragnize" @close="dialog.editOrganizeFlag = false" :visible.sync="dialog.editOrganizeFlag" width="450px" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false">
      <modify-organize @refresh="getDepartmentList()" ref="edit" :editData="editdata" @close="dialog.editOrganizeFlag=false"></modify-organize>
    </el-dialog>
  </section>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { Auth, Layout, Dependencies } from "~/core/decorator";
import { PageService } from "~/utils/page.service";
import { Action, State, Mutation, Getter, namespace } from "vuex-class";
import { DepartmentService } from "~/services/management-service/department.service";
import { UserService } from "~/services/management-service/user.service";
import { LoginService } from "~/services/management-service/login.service";
import DataForm from "~/components/common/data-form.vue";
import DataBox from "~/components/common/data-box.vue";
import BatchAllotRole from "~/components/system-manage/user-manage/batch-allot-role.vue";
import AllotRole from "~/components/system-manage/user-manage/allot-role.vue";
import FacilityManage from "~/components/system-manage/user-manage/facility-manage.vue";
import DepartmentTree from "~/components/system-manage/department-tree.vue";
import ModifyUser from "~/components/system-manage/user-manage/modify-user.vue";
import AddUser from "~/components/system-manage/user-manage/add-user.vue"; // 新增用户
import AddOrganize from "~/components/system-manage/user-manage/add-organize.vue";
import ModifyOrganize from "~/components/system-manage/user-manage/modify-organize.vue";
import BatchCollectorLevel from "~/components/system-manage/user-manage/batch-collector-level.vue";
import BatchFacility from "~/components/system-manage/user-manage/batch-facility.vue";
import DataTree from "~/components/common/data-tree.vue";

import { CommonService } from "~/utils/common.service";

// @Auth(14)
@Layout("workspace")
@Component({
  components: {
    ModifyUser,
    DepartmentTree,
    FacilityManage,
    AllotRole,
    BatchAllotRole,
    DataForm,
    DataBox,
    AddUser,
    AddOrganize,
    ModifyOrganize,
    BatchCollectorLevel,
    BatchFacility,
    DataTree
  }
})
export default class UserManage extends Vue {
  @Dependencies(DepartmentService)
  private departmentService: DepartmentService;
  @Dependencies(UserService)
  private userService: UserService;
  @Dependencies(LoginService)
  private loginService: LoginService;
  @Dependencies(PageService)
  private pageService: PageService;

  @Getter
  private departmentData;
  @Action
  private getDepartmentList;
  @Action
  private getCompanyList;

  private userDataSet = [];
  private userModel: any = {
    userName: "",
    realName: "",
    userStatus: "",
    deptCode: ""
  };
  private userObj: any = {};
  private companyCode: any = "";
  private dialog: any = {
    modify: false,
    batchRole: false,
    roleAllot: false,
    facility: false,
    batchFacility: false,
    addUser: false,
    editOrganizeFlag: false,
    addOrganizeFlag: false,
    batchLevel: false
  };
  private editdata: any = {};
  private selectionList: any[] = [];
  private userList: any = [];
  private status: any = 0;
  private deptId: string = "";
  private dept: any = "";
  private defaultParams: any = {
    deptCode: ""
  };
  private pid: any = "";
  private deptCode: any = "";
  private openModel: any = {
    userIds: [],
    caseSwitch: ""
  };

  private refresh(formName) {
    this.$nextTick(() => {
      const form: any = this.$refs[formName];
      form.refresh();
    });
  }
  /**
   * 修改机构open事件(获取机构)
   */
  private getOragnize() {
    this.$nextTick(() => {
      const edit: any = this.$refs["edit"];
      edit.refresh();
    });
  }
  /**
   * 新增用户open事件
   */
  private getdeptId() {
    this.$nextTick(() => {
      const dept: any = this.$refs["dept"];
      dept.refresh(this.dept);
    });
  }
  private dialogOpen() {
    this.$nextTick(() => {
      const addUser: any = this.$refs["add-dept"];
      addUser.refresh(this.dept);
    });
  }
  /**
   * 重置密码
   */
  private resetClick(scope) {
    this.$confirm(`您确定要对用户${scope.row.userName}重置密码吗?`, "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning"
    })
      .then(() => {
        this.userService
          .modifyUserPassword({
            userId: scope.row.id
          })
          .subscribe(data => {
            this.$message.success("重置密码成功");
          });
      })
      .catch(() => {
        this.$message({
          type: "info",
          message: "已取消重置"
        });
      });
  }
  /**
   * 批量分配角色
   */
  private batchRoleClick() {
    if (this.selectionList.length === 0) {
      this.$alert("请选择要分配角色的用户", "提示", {
        confirmButtonText: "确定"
      });
    } else {
      this.dialog.batchRole = true;
    }
  }
  /**
   * 批量设备管理
   */
  private batchDeviceManage() {
    if (this.selectionList.length === 0) {
      this.$message("请选择要操作的用户");
    } else {
      this.dialog.batchFacility = true;
    }
  }
  /**
   * 批量开启分案
   */
  private batchOpenClick() {
    if (this.selectionList.length === 0) {
      this.$alert("请选择要批量开启分案的用户", "提示", {
        confirmButtonText: "确定"
      });
    } else {
      this.openModel.userIds = this.selectionList.map(v => v.id);
      this.openModel.caseSwitch = "ENABLED";
      this.userService.batchCaseSwitch(this.openModel).subscribe(data => {
        this.$message.success("开启成功!");
        this.refreshData();
      });
    }
  }
  /**
   * 批量关闭分案
   */
  private batchCloseClick() {
    if (this.selectionList.length === 0) {
      this.$alert("请选择要批量关闭分案的用户", "提示", {
        confirmButtonText: "确定"
      });
    } else {
      this.openModel.userIds = this.selectionList.map(v => v.id);
      this.openModel.caseSwitch = "DISABLED";
      this.userService.batchCaseSwitch(this.openModel).subscribe(data => {
        this.$message.success("关闭成功!");
        this.refreshData();
      });
    }
  }
  /**
   * 批量更改催收员等级
   */
  private batchLevelClick() {
    if (this.selectionList.length === 0) {
      this.$alert("请选择要批量修改催收员等级的用户", "提示", {
        confirmButtonText: "确定"
      });
    } else {
      this.dialog.batchLevel = true;
    }
  }
  private refreshData() {
    this.userService
      .getAllUsers(this.userModel, this.pageService)
      .subscribe(data => {
        this.userDataSet = data;
        this.companyCode = data[0] ? data[0].companyCode : "";
      });
  }

  /**
   * 点击获取机构id
   */
  private onChange(value) {
    this.userModel.deptCode = value.deptCode;
    this.deptId = value.id;
    this.dept = value;
    this.refreshData();
  }

  private onEdit(value) {
    this.dialog.editOrganizeFlag = true;
    this.editdata = value;
  }
  private onAdd(value) {
    this.dialog.addOrganizeFlag = true;
  }
  /**
   * 移除机构
   */
  private onDelete(value) {
    this.$confirm("此操作将永久删除该组织机构, 是否继续?", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning"
    }).then(() => {
      this.departmentService.deleteDepartment(value.id).subscribe(data => {
        this.getDepartmentList();
        this.$message.success("删除成功!");
      });
    });
  }

  private mounted() {
    this.getDepartmentList();
    this.getCompanyList();
  }
}
</script>

<style lang="less" scoped>
.page.user-manage {
  .col-span-2 {
    padding: 0;
  }
  .add-org {
    padding: 10px 20px;
    text-align: right;
    border-bottom: solid 1px #e4e4e4;
  }
  .org-tree {
    border: solid 1px #e4e4e4;
    min-height: 600px;
  }
}
</style>
